<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <style>
        #ulactive .active{
            background:#2F8AE3 ;
            color: #fff;
        }
        #ulactive{
            position: fixed;
            top:16px;
            right:50px;
            z-index: 9999;
            border-radius: 6px;
            border:1px solid #2F8AE3;
        }
        #ulactive li{
            cursor: pointer;
        }
        .select{
            background: #2F8AE3;
            color:#fff;
        }
        #query {
            display: inline-block;
            margin-right: 10px;
            line-height: 1;
            font-size: 14px;
            padding: 8px 10px;
            background: #2F8AE3;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
        }
        #ulactive input {
            float: none;
        }
        .begin, .end {
            width: 110px;
            height: 28px;
            border-radius: 3px;
            border: 1px solid #ccc;
        }
        .button {
            background: #00a0e9;
            margin-left: 20px;
            padding: 5px 10px;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/laydate/laydate.js"></script>


<%--    <script src="/lib/Highcharts-5.0.14/code/highcharts-zh_CN.js"></script>--%>
</head>

<body style="overflow: hidden">

    <ul class="clearfix" id="ulactive" >

        <li class="fl select" data-type="1" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">日</li>
        <li class="fl" data-type="2" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">周</li>
        <li class="fl" data-type="3" data-type="month" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">月</li>
        <li class="fl" data-type="4" data-type="year" style="padding: 10px 20px;">年</li>
    </ul>
    <div style="padding: 5px 20px;margin-top:5px;" class="time">
        <input type="text" class="begin" name="beginTime" style="float: none!important;" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
        <span>~</span>
        <input type="text" class="end" name="endTime" style="float: none!important;" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
        <button id="query">查询</button>
    </div>



<!--
*************************************************************************
   Generated by HCODE at 2017-09-11 14:38:27
   From: https://code.hcharts.cn/demos/hhhhDs
*************************************************************************
 -->
<div id="container" style="min-width: 510px;margin: 0 auto;background: #fff"></div>
    <div class="cont" style="display: none;padding-top: 60px;">

        <div style="margin-top:-35px;margin-bottom:20px;">
            <button class="button">返回</button>
        </div>
        <div class="pagediv" style="margin: 0 auto;width: 97%;">
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>事件类型</th>
                    <th>提交人</th>
                    <th>提交时间</th>
                    <th>事件描述</th>
                    <th>所属网格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="list"></tbody>
            </table>
        </div>
        <div style="margin: 0px auto 0px;height:50px;width: 97%;" class="clearfix">
            <div id="dbgz_page" class="M-box3" style="float: right; margin-top: 13px;display: none">

            </div>
        </div>
    </div>
<script>
    $('#container').height($(window).height()-44);
    var urllocation=$.GetRequest().type;

    //    分页列表
    var ajaxPageLe={
        data:{
            page:1,//当前处于第几页
            pageSize:10,//一页显示几条
            useFlag:true
        },
        page:function () {
            var me=this;
            $.ajax({
                url:'/gridEvent/gridEventByUserName',
                type:'get',
                data:me.data,
                dataType:'json',
                success:function(reg){
                    var arr=reg.datas;
                    var str="";
                    for (var i = 0; i < arr.length; i++) {
                        str += '<tr>' +
                            '<td>' + (i + 1) + '</td>' +
                            '<td>' + arr[i].codeName + '</td>' +
                            '<td>' + arr[i].userName + '</td>' +
                            '<td>' + arr[i].dateTime + '</td>' +
                            '<td>' + arr[i].eventInfo + '</td>' +
                            '<td>' + arr[i].gridName + '</td>' +
                            '<td>' +function () {
                                if(me.data.flowStatus==0){
                                    return  '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'" class="btnData" data-type="2" style="margin-right: 10px;">编辑</a>' +
                                        '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'"   class="deleteAthis">删除</a>'
                                } else {
                                    return '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'"' +
                                        '  data-flowStep="'+arr[i].flowPrcs+'" data-prcsId="'+arr[i].flowPrcs+'" data-rumId="'+arr[i].rumId+'"  data-flowPrcs="'+arr[i].prcsId+'"  data-flowId="'+arr[i].flowId+'"   class="particulars">查看详情</a>'
                                }
                            }()+
                        '</td></tr>'
                    }
                    $('.list').html(str);
                    if(reg.total>10){
                        $('#dbgz_page').show();
                        me.pageTwo(reg.total,me.data.pageSize,me.data.page)
                    }else{
                        $('#dbgz_page').hide();
                    }
//                    me.pageTwo(reg.total,me.data.pageSize,me.data.page)
                }
            })

        },
        pageTwo:function (totalData, pageSize,indexs) {
            var mes=this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                jump: true,
                coping: true,
                homePage:'',
                endPage: '',
                current:indexs||1,
                callback: function (index){
                    mes.data.page=index.getCurrent();
                    mes.page();
                }
            });
        }
    };
    ajaxPageLe.page();

    $(document).delegate('.particulars','click',function () {
        var flowId=$(this).attr('data-flowId');
        if(flowId == "undefined"){
            flowId=""
            window.open('/workflow/work/workformPreView?flowId='+flowId+'&flowStep='+$(this).attr('data-flowStep')+'&runId='+$(this).attr('data-rumId')+'&prcsId='+$(this).attr('data-prcsId')+'&tabId='+$(this).attr('data-id'))
        }else{
            flowId=$(this).attr('data-flowId');
            window.open('/workflow/work/workformPreView?flowId='+flowId+'&flowStep='+$(this).attr('data-flowStep')+'&runId='+$(this).attr('data-rumId')+'&prcsId='+$(this).attr('data-prcsId')+'&tabId='+$(this).attr('data-id'))
        }


    });

    // 列表返回
    $('.button').click(function(){
        $('.cont').hide();
        $('#container').show();
        $('#ulactive').show();
        $('.time').show();
    });




    function typeajax(timeType,startTime,endTime,fn) {
        $.ajax({
            type : 'get',
            url : '/gridEvent/getStatisticsByGridEventType',
            dataType : 'json',
            data : {
                startTime:startTime,
                endTime:endTime,
                queryType:urllocation,
                timeType:timeType
            },
            success : function(json) {
                var rsp=json.datas;
                var arrs=[];
                var arrsTwo=[];
                for(var i=0;i<rsp.length;i++){
                    var obj={};
                    obj.name=rsp[i].name;
                    obj.id=rsp[i].name;
                    obj.ids=rsp[i].id;
                    obj.index=(i+1);
                    obj.data=[]
                    var objTwo={};
                    objTwo.name=rsp[i].name;
                    objTwo.drilldown=rsp[i].name;
                    objTwo.y=rsp[i].y;
//                    if(urllocation==2){
//                        objTwo.index=(i+1);
//                    }
                    arrsTwo.push(objTwo);
                    for(var m=0;m<rsp[i].data.length;m++){
                        var arrData=[];
                        arrData.push(rsp[i].data[m].name);
                        arrData.push(rsp[i].data[m].y);
                        arrData.push(rsp[i].data[m].id);
                        obj.data.push(arrData);
                    }
                    arrs.push(obj)

                }
                /*console.log(arrsTwo)
                console.log(arrs)*/
                // Create the chart
                fn(arrsTwo,arrs,urllocation)
            }
        });
    }


    $(function () {

        $('#query').click(function () {
            typeajax("",$('.begin').val(),$('.end').val(),function (arrs,arrsTwo,dataType) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '事件统计'
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '事件统计'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){

                                    if(e.point.options.drilldown==undefined){
                                        $('.cont').show();
                                        $('#container').hide();
                                        $('#ulactive').hide();
                                        $('.time').hide();
                                        if(dataType=='grid'){
                                            ajaxPageLe.data.gridName=e.point.series.name;
                                            ajaxPageLe.data.userName=e.point.name
                                            ajaxPageLe.data.timeType='';
                                            ajaxPageLe.data.startTime=$('.begin').val();
                                            ajaxPageLe.data.endTime=$('.end').val();
                                            ajaxPageLe.data.page=1;
                                            ajaxPageLe.page()
                                        }else{
//                                            ajaxPageLe.data.gridName=e.point.series.name;
                                            ajaxPageLe.data.type=e.point.series.userOptions.ids;
                                            ajaxPageLe.data.userName=e.point.name
                                            ajaxPageLe.data.timeType='';
                                            ajaxPageLe.data.startTime=$('.begin').val();
                                            ajaxPageLe.data.endTime=$('.end').val();
                                            ajaxPageLe.data.page=1;
                                            ajaxPageLe.page()
                                        }
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '事件统计',
                        colorByPoint: true,
                        enabled:false,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })

        });

        typeajax($('.select').attr('data-type'),'','',function (arrs,arrsTwo,dataType) {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '事件统计'
                },
                credits: {
                    enabled: false
                },
                subtitle: {
                    text: '点击可查看详细信息'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: '事件统计'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        },
                        events:{
                            click:function(e){
                                //console.log(e)

                                if(e.point.options.drilldown==undefined){
                                    $('.cont').show();
                                    $('#container').hide();
                                    $('#ulactive').hide();
                                    $('.time').hide();
                                    console.log(e.point)
                                    if(dataType=='grid'){
                                        ajaxPageLe.data.gridName=e.point.series.name;
                                        ajaxPageLe.data.userName=e.point.name
                                        ajaxPageLe.data.timeType=$('.select').attr('data-type');
                                        ajaxPageLe.data.page=1;
                                        ajaxPageLe.page()
                                    }else{
//                                        ajaxPageLe.data.gridName=e.point.series.name;
                                        ajaxPageLe.data.type=e.point.series.userOptions.ids;
                                        ajaxPageLe.data.userName=e.point.name;
                                        ajaxPageLe.data.id=e.point.name;
                                        ajaxPageLe.data.timeType=$('.select').attr('data-type');
                                        ajaxPageLe.data.page=1;
                                        ajaxPageLe.page()
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    headerFormat:
                        '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                },
                series: [{
                    name: '事件统计',
                    colorByPoint: true,
                    enabled:false,
                    data: arrs
                }],
                drilldown: {
                    series:arrsTwo
                }
            });
        })


        $('#ulactive li').click(function() {
            $(this).addClass('select').siblings().removeClass('select')
            var type=$(this).attr('data-type')

            typeajax(type,'','',function (arrs,arrsTwo,dataType) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '事件统计'
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '事件统计'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
//                                    var gridName=e.point.options.drilldown;
                                    console.log(e.point)
                                    if(e.point.options.drilldown==undefined){
                                        $('.cont').show();
                                        $('#container').hide();
                                        $('#ulactive').hide();
                                        $('.time').hide();
                                        if(dataType=='grid'){
                                            ajaxPageLe.data.gridName=e.point.series.name;
                                            ajaxPageLe.data.userName=e.point.name
                                            ajaxPageLe.data.timeType=type;
                                            ajaxPageLe.data.page=1;
                                            ajaxPageLe.page()
                                        }else{
//                                            ajaxPageLe.data.gridName=e.point.series.name;
                                            ajaxPageLe.data.type=e.point.series.userOptions.ids;
                                            ajaxPageLe.data.userName=e.point.name
                                            ajaxPageLe.data.timeType=$('.select').attr('data-type');
                                            ajaxPageLe.data.page=1;
                                            ajaxPageLe.page()
                                        }


                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '事件统计',
                        colorByPoint: true,
                        enabled:false,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })

        })

    });
</script>
</body>
</html>